<template>
  <div class="container">
    <div class="closeBtn">
        <!-- @click='$router.back()' -->
        <!-- 点击叉叉退回登录页 -->
      <span class="iconfont iconicon-test" @click='$router.back()'></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew" ></span>
    </div>

    <div class="inputName">
        <authInput
        type="text" placeholder='请输入手机号码' rule="^\d{3,11}$" ree_message="请输入有效手机号" @input="setUserName"
        />
      </div>

      <div class="nickName">
        <authInput
        type="text" placeholder='请输入昵称' rule="^\d{3,11}$" ree_message="请输入有效昵称" @input="setNickName"
        />
      </div>

     <div class="inputPwd">
         <authInput
        type="password" placeholder='请输入密码' rule="^\d{3,16}$" ree_message="请输入有效密码" @input="setPassword"
        />
      </div>
       <div class="btn" >
        <authBtn text='注册' @send="setBtn"/>
      </div>

  </div>
</template>

<script>
import authInput from '../components/authInput'
import authBtn from '../components/authBtn'
export default {
    components:{
        authInput :authInput,
        authBtn
    },
    data(){
        return{
            username :'',
            nickname :'',
            password :''
        }
    },
    methods:{

        setUserName(name){
            this.username = name
        },
        setNickName(name){
            this.nickname = name
        },
        setPassword(val){
            this.password = val
        },
        setBtn(){
            this.$axios({
                 url :'/register',
                method:'post',
                data:{
                    username :this.username,
                    password :this.password,
                    nickname :this.nickname
                },

            }).then(res =>{
               if(res.data.statusCode && res.data.statusCode ==400){
                   this.$toast.fail(res.data.message)
               }else{
                   this.$toast.success(res.data.message)
               }

            })
               
        }
    }
};
</script>

<style lang="less" scoped>
.container {
        padding: 0 5.556vw;
    }
    .closeBtn{
        padding-top: 20px;
        .iconfont {
            font-size: 7.5vw;
        }
    }

    .logo{
        display: flex;
        justify-content: center;
        .iconfont {
            font-size: 35vw;
            color: #d81e06;
        }
    }
</style>